<template>
	<view class="ranking-list">
		<view>
			<image :src="ranking_list"></image>
		</view>
		<view class="ranking-list-user">
			<view class="user-msg-down">
				<view>
					<image :src="avatarUrl"></image>
					<text>{{nickName}}</text>
				</view>
				<view>
					挑战倒计时：
					<text>
						<text class="count-down">{{h}}</text>
						:
						<text class="count-down">{{f}}</text>
						:
						<text class="count-down">{{s}}</text>
					</text>
				</view>
			</view>
			<view class="gain-award-num">
				今日已经有<text style="color: #FF5C46;">{{user.num}}</text>位考取了<text style="color: #FF5C46;">“功名”</text>，获得奖励
			</view>
			<view>
				<view class="earning-fame" @click="toAnswer">
					立刻考取“功名”
				</view>
				<view>
					金榜题名，赢取奖品
				</view>
			</view>
		</view>
		<view class="yesterday-ranking">
			<view class="yesterday-ranking-title">
				昨日排名
			</view>
			<view class="yesterday-ranking-text">
				<view>排名</view>
				<view>得分(分)</view>
				<view>用时(秒)</view>
				<view>奖励</view>
			</view>
		<view class="yesterday-ranking-user">
			<scroll-view scroll-y="true" v-if="list.length>=10" :style="'height:780px'" @scrolltolower="loadingMore">
				<view class="yesterday-ranking-person" v-for="(item,index) in list" :key="index">
					<view style="display: flex;padding-top: 6upx;box-sizing: border-box;">
						<view class="yesterday-ranking-msg" v-if="index==0">
							<image :src="num_one_icon"></image>
							<view style="color: #FFA500;">{{item.grade_name}}</view>
						</view>
						<view class="yesterday-ranking-msg" v-if="index==1">
							<image :src="num_teo_icon"></image>
							<view style="color: #999999;">{{item.grade_name}}</view>
						</view>
						<view class="yesterday-ranking-msg" v-if="index==2">
							<image :src="num_three_icon"></image>
							<view style="color: #A35F04;">{{item.grade_name}}</view>
						</view>
						<view class="yesterday-ranking-msg" v-if="index>2">
							<view class="ranking-num">
								{{index+1}}
							</view>
						</view>
						<view class="yesterday-ranking-msg-user" style="margin-left: 26upx;">
							<image :src="item.avatar"></image>
							<text>{{item.nickname | goodName_val}}</text>
						</view>
					</view>
					<view>{{item.fraction}}</view>
					<view>{{item.time}}</view>
					<view class="yesterday-ranking-award">
						<view>
							<image :src="item.reward.prize_img"></image>
							<text>{{item.reward.prize}}</text>
						</view>
						<view style="margin-left: 10upx;">
							<image style="width:66upx;" :src="achievement_icon"></image>
							<text style="width: 90upx;">{{item.reward.achievement_value}}</text>
						</view>
					</view>
				</view>
			</scroll-view>
			<!-- 少于10项 -->
			<view class="yesterday-ranking-person" v-for="(item,index) in list" :key="index" v-else>
				<view style="display: flex;padding-top: 6upx;box-sizing: border-box;">
					<view class="yesterday-ranking-msg" v-if="index==0">
						<image :src="num_one_icon"></image>
						<view style="color: #FFA500;">{{item.grade_name}}</view>
					</view>
					<view class="yesterday-ranking-msg" v-if="index==1">
						<image :src="num_teo_icon"></image>
						<view style="color: #999999;">{{item.grade_name}}</view>
					</view>
					<view class="yesterday-ranking-msg" v-if="index==2">
						<image :src="num_three_icon"></image>
						<view style="color: #A35F04;">{{item.grade_name}}</view>
					</view>
					<view class="yesterday-ranking-msg" v-if="index>2">
						<view class="ranking-num">
							{{index+1}}
						</view>
					</view>
					<view class="yesterday-ranking-msg-user" style="margin-left: 26upx;">
						<image :src="item.avatar"></image>
						<text>{{item.nickname | goodName_val}}</text>
					</view>
				</view>
				<view>{{item.fraction}}</view>
				<view>{{item.time}}</view>
				<view class="yesterday-ranking-award">
					<view>
						<image :src="item.reward.prize_img"></image>
						<text>{{item.reward.prize}}</text>
					</view>
					<view style="margin-left: 10upx;">
						<image style="width:66upx;" :src="achievement_icon"></image>
						<text style="width: 90upx;">{{item.reward.achievement_value}}</text>
					</view>
				</view>
			</view>
		</view>
		</view>
		<ending v-if="page>last_page||page==1"></ending>
	</view>
</template>

<script>
	import {
		everyWholeTime
	} from '@/common/util.js'
	import ending from '../../../../common/ending.vue'
	export default{
		components:{ending},
		filters: {
			goodName_val(value) {
				if (!value) return ''
				if (value.length > 3) {
					return value.slice(0, 3) + '...'
				}
				return value
			}
		},
		data(){
			return{
				nickName: '',
				avatarUrl: '',
				h: '00',
				f: '00',
				s: '00',
				ranking_list: this.$store.state.imgUrl + 'img/nominate/ranking_list.png',
				num_one_icon: this.$store.state.imgUrl + 'img/nominate/num_one_icon.png',
				num_teo_icon: this.$store.state.imgUrl+ 'img/nominate/num_teo_icon.png',
				num_three_icon: this.$store.state.imgUrl + 'img/nominate/num_three_icon.png',
				list: [],
				last_page: 1,
				page: 1,
				// 是否到十点了
				isNightTen: false,
				isSix: false,//是否到六点了
				timeId: null,
				user: {
					num: 0
				},
				achievement_icon: this.$store.state.imgUrl + 'img/nominate/achievement-icon.png'
			}
		},
		onLoad() {
			if (this.$store.getters.getToken) {
				try {
					const res = uni.getStorageSync('userInfo');
					if (res) {
						this.nickName = res.nickName
						this.avatarUrl = res.avatarUrl
					}
				} catch (e) {
					this.nickName = this.$store.state.nickName
					this.avatarUrl = this.$store.state.avatarUrl
				}
			}
		},
		onShow() {
			this.getData()
			this.getTime()
		},
		onHide() {
			if (this.timeId != null) {
				clearInterval(this.timeId)
				this.timeId = null
			}
		},
		onUnload() {
			if (this.timeId != null) {
				clearInterval(this.timeId)
				this.timeId = null
			}
		},
		methods: {
			getTime(){
				this.timeId = setInterval(()=>{
					let a = new Date().getTime() - everyWholeTime('22')
					let b = new Date().getTime() - everyWholeTime('06')
					a > 0 ? this.isNightTen = true : this.isNightTen = false,
					b > 0 ? this.isSix = true : this.isSix = false
					if (a > 0) { //过了10点
						this.h = '00'
						this.f = '00'
						this.s = '00'
					} else {
						let distance =everyWholeTime('22')- new Date().getTime()
						var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
						var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
						var seconds = Math.floor((distance % (1000 * 60)) / 1000);
						this.h = hours>=10?hours.toString():'0'+hours.toString();
						this.f = minutes>=10?minutes.toString():'0'+minutes.toString();
						this.s = seconds>=10?seconds.toString():'0'+seconds.toString();
					}
				},1000)
			},
			getData() {
				this.page = 1
				let data = {
					token: this.$store.getters.getToken,
					is_yesterday: 1,
					page: this.page,
					pagesize: 10
				}
				this.$api.goldLeaderBoard(data).then(res => {
					if(res.status) {
						this.user.num = res.user.num
						this.list = res.list.data
						this.last_page = res.list.last_page
					}else {
						uni.showToast({
							title: res.msg,
							icon: 'none',
							duration: 2000
						})
					}
					console.log('获取排行榜数据',res)
				}).catch(err => {
					console.log('获取排行榜数据',err)
				})
			},
			loadingMore() {
				this.page = this.page+1
				if(this.page>this.last_page) {
					uni.showToast({
						title: '没有更多了',
						icon: 'none',
						duration: 2000
					})
					return false
				}else {
					let data = {
						token: this.$store.getters.getToken,
						is_yesterday: 1,//1查昨天  2查今天
						page: this.page,
						pagesize: 10
					}
					this.$api.goldLeaderBoard(data).then(res => {
						if(res.status) {
							this.user.num = res.user.num
							this.list = this.list.concat(res.list.data) 
							this.last_page = res.list.last_page
						}else {
							uni.showToast({
								title: res.msg,
								icon: 'none',
								duration: 2000
							})
						}
						console.log('获取今日排行榜数据',res)
					}).catch(err => {
						console.log('获取今日排行榜数据',err)
					})
				}
			},
			toAnswer() {
				if(this.isSix&&!this.isNightTen) {
					uni.redirectTo({
						url: '../answerInterface/answerInterface'
					})
				}else {
					uni.showToast({
						title: '挑战时间为6点-22点，明天再来吧！',
						icon: 'none',
						duration: 2000
					})
				}
			}
		}
	}
</script>

<style>
	page{
		position: relative;
		top: 0;left: 0;right: 0;bottom: 0;
	}
	.ranking-list{
		width: 100%;
		height: 100%;
		background: #F5F6F9;
		position: relative;
	}
	.ranking-list>view:first-child image{
		width: 100%;
		height: 480upx;
	}
	.ranking-list-user{
		width: 690upx;
		height: 402upx;
		background: #FFFFFF;
		border-radius: 16upx;
		position: absolute;
		top: 230upx;left: 32upx;
		padding: 20upx 22upx 30upx 20upx;
		box-sizing: border-box;
	}
	.user-msg-down{
		display: flex;
		justify-content: space-between;
	}
	.user-msg-down>view:first-child>image{
		width: 80upx;
		height: 80upx;
		border-radius: 50%;
		vertical-align: middle;
	}
	.user-msg-down>view:first-child>text{
		display: inline-block;
		margin-left: 20upx;
		color: #333333;
		font-size: 30upx;
		vertical-align: middle;
	}
	.user-msg-down>view:last-child{
		color: #999999;
		font-size: 20upx;
		margin-top: 24upx;
		text-align: center;
	}
	.user-msg-down>view:last-child>text{
		color: #FF5C46;
	}
	.user-msg-down>view:last-child .count-down{
		display: inline-block;
		width: 34upx;height: 28upx;
		line-height: 28upx;
		background: #FFE3E3;
		border-radius: 2upx;
		margin: 0 10upx;
	}
	.gain-award-num {
		width: 100%;
		height: 48upx;
		line-height: 48upx;
		text-align: center;
		background: rgba(255, 73, 64, 0.1);
		border-radius: 23upx;
		font-size: 24upx;
		color: #666666;
		margin-top: 30upx;
	}
	.ranking-list-user>view:last-child{
		margin-top: 60upx;
		text-align: center;
	}
	.earning-fame{
		width: 430upx;
		height: 80upx;
		line-height: 80upx;
		background: linear-gradient(#CBEC00,#00A66A);
		box-shadow: 0 8upx 16upx 0 rgba(0,166,106,0.4);
		border-radius: 40upx;
		color: #FFFFFF;
		margin: 0 auto;
	}
	.ranking-list-user>view:last-child>view:last-child{
		color: #999999;
		font-size: 24upx;
		margin-top: 20upx;
	}
	.yesterday-ranking{
		width: 100%;
		/* height: 990upx; */
		background: #FFFFFF;
		margin-top: 165upx;
		padding-top: 30upx;
		box-sizing: border-box;
	}
	.yesterday-ranking-title{
		width: 182upx;
		height: 64upx;
		line-height: 64upx;
		text-align: center;
		color: #FFFFFF;
		background: linear-gradient(to right,#4CCB31,#00B574);
		border-radius: 0 40upx 40upx 0;
	}
	.yesterday-ranking-text{
		width: 100%;
		height: 88upx;
		background: #E8E8E8;
		color: #333333;
		font-size: 28upx;
		display: flex;
		padding: 0 30upx;
		/* padding: 0 94upx 0 32upx; */
		box-sizing: border-box;
		/* justify-content: space-between; */
		margin-top: 30upx;
	}
	.yesterday-ranking-text>view{
		width: 56upx;
		position: relative;
	}
	.yesterday-ranking-text>view:nth-child(1){
		line-height: 88upx;
	}
	.yesterday-ranking-text>view:nth-child(2){
		margin-top: 6upx;
		position: absolute;
		left: 352upx;
	}
	.yesterday-ranking-text>view:nth-child(3){
		margin-top: 6upx;
		position: absolute;
		left: 456upx;
	}
	.yesterday-ranking-text>view:nth-child(4){
		line-height: 88upx;
		position: absolute;
		right: 55upx;
	}
	.yesterday-ranking-user{
		width: 100%;
		padding: 0 30upx;
		box-sizing: border-box;
	}
	.yesterday-ranking-msg>image{
		width: 30upx;
		height: 28upx;
	}
	.yesterday-ranking-msg>view{
		font-size: 28upx;
	}
	.yesterday-ranking-person{
		text-align: center;
		padding: 28upx 0;
		box-sizing: border-box;
		border-bottom: 1upx solid #DEDEDE;
		display: flex;
	}
	.yesterday-ranking-msg-user>image{
		width: 80upx;
		height: 80upx;
		border-radius: 50%;
		vertical-align: middle;
	}
	.yesterday-ranking-msg-user>text{
		display: inline-block;
		margin-left: 10upx;
		color: #333333;
		font-size: 30upx;
		vertical-align: middle;
		width: 130upx;
	}
	.yesterday-ranking-person>view:nth-child(2){
		width: 70upx;
		margin-left: 10upx;
		color: #666666;
		font-size: 28upx;
		line-height: 90upx;
	}
	.yesterday-ranking-person>view:nth-child(3){
		text-align: right;
		width: 88upx;
		color: #666666;
		font-size: 28upx;
		line-height: 90upx;
	}
	.yesterday-ranking-award{
		display: flex;
	}
	.yesterday-ranking-award>view{
		border-radius: 4upx;
		height: 100upx;
		margin-left: 30upx;
	}
	.yesterday-ranking-award>view:last-child{
		/* background: #D9F2E9; */
	}
	.yesterday-ranking-award>view>text{
		display: block;
		/* line-height: 18upx; */
		color: #666666;
		font-size: 24upx;
	}
	.yesterday-ranking-award>view>image{
		width: 90upx;
		height: 66upx;
		border-radius: 4upx 4upx 0 0; 
	}
	.ranking-num{
		width: 56upx;
		height: 32upx;
		line-height: 32upx;
		background: #DEDEDE;
		text-align: center;
		color: #333333;
		font-size: 28upx;
		margin-top: 28upx;
		border-radius: 16upx;
	}
</style>
